<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#box{
			/*绝对位置*/
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: red;
			left: 200px;
			top: 200px;
		}
	</style>
	<body>
		<!--
			要让div移动，可以改变left和top的值
			条件：需要获取left和top的值
		-->
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var oBox = document.getElementById("box")
			oBox.onmousedown = function  (ev) {
				var ev = event || ev
				console.log(oBox.offsetLeft,oBox.offsetTop)
				console.log(ev.clientX,ev.clientY)
                var difX = ev.clientX - oBox.offsetLeft
                var difY = ev.clientY - oBox.offsetTop
                console.log("difX:",difX,"difY:",difY)
                //移动鼠标 
                oBox.onmousemove = function (ev) {
                	//和上面的ev不一样
                	var ev = ev || event
                	var oBox_left = ev.clientX - difX
                	var oBox_top = ev.clientY - difY
                	//不要忘记加px
                	oBox.style.left = oBox_left + "px"
                	oBox.style.top = oBox_top + "px"
                }
                //抬起鼠标，不动
                oBox.onmouseup = function  () {
                	oBox.onmousemove = null
                }
			}
			
		</script>
	</body>
</html>
